import React from 'react'
import { Card, Statistic } from 'antd'
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons'
import type { StatisticProps } from 'antd/es/statistic/Statistic'

interface StatisticCardProps extends Omit<StatisticProps, 'prefix'> {
  loading?: boolean
  trend?: 'up' | 'down' | 'none'
  trendValue?: number | string
  extra?: React.ReactNode
  style?: React.CSSProperties
}

/**
 * 统计卡片组件
 * @description 用于展示重要数据指标，支持同比/环比趋势
 * 
 * @example
 * ```tsx
 * <StatisticCard
 *   title="总销售额"
 *   value={112893}
 *   prefix="¥"
 *   trend="up"
 *   trendValue={12}
 *   extra={<span>日同比</span>}
 * />
 * ```
 * 
 * @param title - 指标名称
 * @param value - 指标值
 * @param trend - 趋势方向：'up' | 'down' | 'none'
 * @param trendValue - 趋势值
 * @param loading - 加载状态
 */
const StatisticCard: React.FC<StatisticCardProps> = ({
  loading,
  trend = 'none',
  trendValue,
  extra,
  style,
  ...props
}) => {
  const renderTrend = () => {
    if (trend === 'none' || !trendValue) return null

    const color = trend === 'up' ? '#f5222d' : '#52c41a'
    const Icon = trend === 'up' ? ArrowUpOutlined : ArrowDownOutlined

    return (
      <span style={{ color, marginLeft: 8 }}>
        <Icon /> {trendValue}%
      </span>
    )
  }

  return (
    <Card loading={loading} style={style}>
      <Statistic {...props} suffix={renderTrend()} />
      {extra && <div style={{ marginTop: 8 }}>{extra}</div>}
    </Card>
  )
}

export default StatisticCard 